﻿<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>HzyAdminUI</title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="">
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <link href="../../css/web-icons-master/css/web-icons.css" rel="stylesheet" />
    <!--样式-->
    <link href="../../css/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../css/core.css" rel="stylesheet" />
    <link href="../../css/site.css" rel="stylesheet" />
    <style type="text/css">
        .color-box {
            width: 20px;
            height: 40px;
            border-radius: 4px
        }

        .btn.btn-direction {
            width: 174px
        }

        .btn-pill-left,
        .btn-pill-right {
            width: 120px
        }

        .active>.auto .text,
        .active>.text,
        .text-active {
            display: none !important
        }

        .active>.auto .text-active,
        .active>.text-active {
            display: inline-block !important
        }

        .active .icon {
            line-height: 1
        }

        @media screen and (max-width:768px) {
            .btn-group-justified .btn {
                min-height: 50px
            }
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">Buttons</h1>
        </div>
        <div class="page-content">

            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">全局</h3>
                </div>
                <div class="panel-body container-fluid">
                    <div class="row row-lg">
                        <div class="col">

                            <div class="example-wrap">
                                <h4 class="example-title">默认</h4>
                                <p>可以使用任何可用的按钮类来快速创建按钮，我们提供了多种不同颜色来适应不同的应用场景。</p>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button"
                                                        class="btn btn-block btn-default">Default</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-blue-grey-200"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#e4eaec</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-blue-grey-300"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#ccd5db</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-blue-grey-400"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#76838f</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button"
                                                        class="btn btn-block btn-secondary">Secondary</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-btn-secondary"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#6c757d</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-btn-secondary-hover"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#5a6268</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-btn-secondary-active"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#545b62</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button"
                                                        class="btn btn-block btn-primary">Primary</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-primary-600"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#62a8ea</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-primary-500"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#89bceb</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-primary-700"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#4e97d9</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button"
                                                        class="btn btn-block btn-success">Success</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-green-600"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#46be8a</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-green-500"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#5cd29d</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-green-700"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#36ab7a</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button" class="btn btn-block btn-info">Info</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-cyan-600"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#57c7d4</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-cyan-500"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#77d6e1</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-cyan-700"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#47b8c6</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button"
                                                        class="btn btn-block btn-warning">Warning</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-orange-600"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#f2a654</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-orange-500"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#f4b066</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-orange-700"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#e79857</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button"
                                                        class="btn btn-block btn-danger">Danger</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-red-600"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#f96868</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-red-500"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#fa7a7a</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-red-700"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#e9595b</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button" class="btn btn-block btn-dark">Dark</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-blue-grey-600"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#526069</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-blue-grey-500"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#76838f</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-blue-grey-700"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#37474f</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button" class="btn btn-block btn-light">Light</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-btn-light"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#f8f9fa</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-btn-light-hover"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#e2e6ea</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-btn-light-active"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#dae0e5</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-4 col-lg-2">
                                        <div class="example">
                                            <ul class="list-unstyled">
                                                <li class="mb-20">
                                                    <button type="button"
                                                        class="btn btn-block btn-inverse">Inverse</button>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-grey-100"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">普通</p>
                                                        <span class="font-size-12">#ffffff</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-grey-100"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">鼠标悬停</p>
                                                        <span class="font-size-12">#ffffff</span>
                                                    </div>
                                                </li>
                                                <li class="mb-20">
                                                    <div class="float-left color-box bg-grey-100"></div>
                                                    <div class="ml-35">
                                                        <p class="font-size-14 grey-600 m-0">激活</p>
                                                        <span class="font-size-12">#ffffff</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row row-lg">
                        <div class="col-lg-6">

                            <div class="example-wrap">
                                <h4 class="example-title">幽灵按钮</h4>
                                <p>通过添加
                                    <code>.btn-outline</code> 类来实现描边效果。</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-outline btn-default">Default</button>
                                    <button type="button" class="btn btn-outline btn-primary">Primary</button>
                                    <button type="button" class="btn btn-outline btn-success">Success</button>
                                    <button type="button" class="btn btn-outline btn-info">Info</button>
                                    <button type="button" class="btn btn-outline btn-warning">Warning</button>
                                    <button type="button" class="btn btn-outline btn-danger">Danger</button>
                                    <button type="button" class="btn btn-outline btn-dark">dark</button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6">

                            <div class="example-wrap">
                                <h4 class="example-title">圆角按钮</h4>
                                <p>圆形按钮与方形按钮可以用来区分不同的行为或风格。</p>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="example example-buttons">
                                            <div>
                                                <button type="button" class="btn btn-inverse btn-round btn-lg">
                                                    大尺寸
                                                </button>
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-inverse btn-round">
                                                    默认
                                                </button>
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-inverse btn-round btn-sm">
                                                    小尺寸
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="example example-buttons">
                                            <div>
                                                <button type="button"
                                                    class="btn btn-squared btn-outline btn-default btn-lg">
                                                    大尺寸
                                                </button>
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-squared btn-outline btn-default">
                                                    默认
                                                </button>
                                            </div>
                                            <div>
                                                <button type="button"
                                                    class="btn btn-squared btn-outline btn-default btn-sm">
                                                    小尺寸
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row row-lg">
                        <div class="col-lg-6">

                            <div class="example-wrap">
                                <h4 class="example-title">大小</h4>
                                <p>按钮完美支持响应式设计，其尺寸随屏幕的大小不同而产生变化。
                                    <br>可以通过添加
                                    <code>.btn-lg</code> ，
                                    <code>.btn-sm</code> ，或
                                    <code>.btn-sm</code> 来实现显示不同大小的按钮。 </p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-outline btn-default btn-lg">大按钮</button>
                                    <button type="button" class="btn btn-outline btn-default">默认按钮</button>
                                    <button type="button" class="btn btn-outline btn-default btn-sm">小按钮</button>
                                    <button type="button" class="btn btn-outline btn-default btn-sm">微型按钮</button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6">

                            <div class="example-wrap">
                                <h4 class="example-title">带图标的块级按钮</h4>
                                <p>创建块级按钮只需要在按钮上添加
                                    <code>.btn-block</code> 类即可。</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-default btn-outline btn-block">
                                        <i class="icon wb-menu float-right" aria-hidden="true"></i>块级按钮
                                    </button>
                                    <button type="button" class="btn btn-primary btn-block btn-round">
                                        <i class="icon wb-menu" aria-hidden="true"></i>块级按钮
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row row-lg">
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">箭头</h4>
                                <p>可通过为按钮添加
                                    <code>.btn-up</code> ，
                                    <code>.btn-right</code> ，
                                    <code>.btn-bottom</code> 或
                                    <code>.btn-left</code> 类来实现。</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-direction btn-up btn-primary">向上</button>
                                    <button type="button" class="btn btn-direction btn-right btn-warning">向右</button>
                                    <button type="button"
                                        class="btn btn-direction btn-bottom btn-success btn-outline">向下
                                    </button>
                                    <button type="button" class="btn btn-direction btn-left btn-danger btn-outline">向左
                                    </button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">动画</h4>
                                <p>按钮可以通过动画来显示隐藏按钮内容。</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-animate btn-animate-side btn-success">
                                        <span>
                                            <i class="icon wb-download" aria-hidden="true"></i>水平动画</span>
                                    </button>
                                    <button type="button" class="btn btn-animate btn-animate-vertical btn-success">
                                        <span>
                                            <i class="icon wb-download" aria-hidden="true"></i>垂直动画</span>
                                    </button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">
                            <div class="example-wrap">
                                <h4 class="example-title">浮动按钮</h4>
                                <p>浮动按钮是一种特殊类型的操作按钮。可在
                                    <code>.btn</code> 上添加
                                    <code>.btn-floating</code> 来实现</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-floating btn-success">
                                        <i class="icon wb-pencil" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-floating btn-success btn-sm">
                                        <i class="icon wb-pencil" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-floating btn-danger">
                                        <i class="icon wb-plus" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-floating btn-danger btn-sm">
                                        <i class="icon wb-plus" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">质感/扁平</h4>
                                <p>质感按钮和扁平按钮示例</p>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="example example-buttons">
                                            <button type="button"
                                                class="btn btn-raised btn-primary btn-block">普通</button>
                                            <button type="button" class="btn btn-raised btn-primary btn-block active"
                                                style="background: #89bceb; border-color:#89bceb">
                                                鼠标悬停
                                            </button>
                                            <button type="button" class="btn btn-raised btn-primary btn-block active">激活
                                            </button>
                                            <button type="button"
                                                class="btn btn-raised btn-primary btn-block disabled">禁用
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="example example-buttons">
                                            <button type="button" class="btn btn-flat btn-default btn-block">普通</button>
                                            <button type="button" class="btn btn-flat btn-default btn-block active"
                                                style="background: #f8f9f9; border-color: #f8f9f9;">
                                                鼠标悬停
                                            </button>
                                            <button type="button" class="btn btn-flat btn-default btn-block active">激活
                                            </button>
                                            <button type="button" class="btn btn-flat btn-default btn-block disabled">禁用
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">胶囊按钮</h4>
                                <p>在
                                    <code>.btn-round</code> 按钮上的基础上通过添加
                                    <code>.btn-pill-left</code> 或
                                    <code>.btn-pill-right</code> 类来实现。</p>
                                <div class="example example-buttons">
                                    <div>
                                        <button type="button"
                                            class="btn btn-round btn-default btn-outline btn-pill-left">
                                            左边
                                        </button>
                                        <button type="button"
                                            class="btn btn-round btn-default btn-outline btn-pill-right">
                                            右边
                                        </button>
                                    </div>
                                    <div>
                                        <button type="button"
                                            class="btn btn-round btn-primary btn-pill-left">左边</button>
                                        <button type="button"
                                            class="btn btn-round btn-primary btn-pill-right">右边</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">带图标的按钮</h4>
                                <p>带图标的按钮示例，您可以通过“
                                    <a href="../basic/icons.html">矢量图标</a>
                                    ”页面来选择图标。
                                </p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-dark">
                                        <i class="icon wb-upload" aria-hidden="true"></i> 上传
                                    </button>
                                    <button type="button" class="btn btn-warning">
                                        <i class="icon wb-thumb-up" aria-hidden="true"></i> 喜欢
                                    </button>
                                    <button type="button" class="btn btn-success">
                                        <i class="icon wb-check" aria-hidden="true"></i> 我同意
                                    </button>
                                    <button type="button" class="btn btn-outline btn-primary">
                                        <i class="icon wb-plus" aria-hidden="true"></i> 更多
                                    </button>
                                    <button type="button" class="btn btn-danger">
                                        <i class="icon wb-link" aria-hidden="true"></i> 链接
                                    </button>
                                    <button type="button" class="btn btn-info">
                                        <i class="icon wb-chat" aria-hidden="true"></i> 评论
                                    </button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">图标按钮</h4>
                                <p>按钮中仅包含图标。</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-icon btn-default">
                                        <i class="icon wb-map" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-primary">
                                        <i class="icon wb-grid-9" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-success">
                                        <i class="icon wb-bell" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-info">
                                        <i class="icon wb-calendar" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-warning btn-round">
                                        <i class="icon wb-time" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-danger btn-round">
                                        <i class="icon wb-plugin" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-dark btn-round">
                                        <i class="icon wb-pie-chart" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-default btn-outline">
                                        <i class="icon wb-pencil" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-primary btn-outline">
                                        <i class="icon wb-eye" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-success btn-outline">
                                        <i class="icon wb-search" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-info btn-outline">
                                        <i class="icon wb-wrench" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-warning btn-outline btn-round">
                                        <i class="icon wb-musical" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-danger btn-outline btn-round">
                                        <i class="icon wb-heart" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-dark btn-outline btn-round">
                                        <i class="icon wb-refresh" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-pure btn-default icon wb-lock"></button>
                                    <button type="button" class="btn btn-pure btn-primary icon wb-thumb-up"></button>
                                    <button type="button" class="btn btn-pure btn-success icon wb-share"></button>
                                    <button type="button" class="btn btn-pure btn-info icon wb-random"></button>
                                    <button type="button" class="btn btn-pure btn-warning icon wb-star"></button>
                                    <button type="button" class="btn btn-pure btn-danger icon wb-print"></button>
                                    <button type="button" class="btn btn-pure btn-dark icon wb-flag"></button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">图标下拉菜单</h4>
                                <p>在下拉菜单中仅使用图标</p>
                                <div class="example example-buttons">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary dropdown-toggle"
                                            id="exampleIconDropdown1" data-toggle="dropdown" aria-expanded="false">
                                            <i class="icon wb-grid-9" aria-hidden="true"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="exampleIconDropdown1" role="menu">
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                        </div>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-warning dropdown-toggle"
                                            id="exampleIconDropdown2" data-toggle="dropdown" aria-expanded="false">
                                            <i class="icon wb-heart" aria-hidden="true"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="exampleIconDropdown2" role="menu">
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                        </div>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-danger dropdown-toggle"
                                            id="exampleIconDropdown3" data-toggle="dropdown" aria-expanded="false">
                                            <i class="icon wb-calendar" aria-hidden="true"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="exampleIconDropdown3" role="menu">
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                        </div>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-dark dropdown-toggle"
                                            id="exampleIconDropdown4" data-toggle="dropdown" aria-expanded="false">
                                            <i class="icon wb-pie-chart" aria-hidden="true"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="exampleIconDropdown4" role="menu">
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">图标下拉菜单</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">社交图标</h4>
                                <p>常见社交媒体图标示例</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-icon social-wechat">
                                        <i class="icon fa-wechat" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-qq">
                                        <i class="icon fa-qq" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-weibo">
                                        <i class="icon fa-weibo" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-facebook">
                                        <i class="icon fa-facebook" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-twitter">
                                        <i class="icon fa-twitter" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-linkedin">
                                        <i class="icon fa-linkedin" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-dribbble">
                                        <i class="icon fa-dribbble" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-instagram">
                                        <i class="icon fa-instagram" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-github">
                                        <i class="icon fa-github" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-skype">
                                        <i class="icon fa-skype" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-youtube">
                                        <i class="icon fa-youtube" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon social-google-plus">
                                        <i class="icon fa-google-plus" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">
                            <div class="example-wrap m-lg-0">
                                <h4 class="example-title">带标签的社交按钮</h4>
                                <p>一般在页面顶部或章节中使用。</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-labeled social-wechat">
                                        <span class="btn-label">
                                            <i class="icon fa-wechat" aria-hidden="true"></i>
                                        </span> 微信
                                    </button>
                                    <button type="button" class="btn btn-labeled social-qq">
                                        <span class="btn-label">
                                            <i class="icon fa-qq" aria-hidden="true"></i>
                                        </span> QQ
                                    </button>
                                    <button type="button" class="btn btn-labeled social-weibo">
                                        <span class="btn-label">
                                            <i class="icon fa-weibo" aria-hidden="true"></i>
                                        </span> 微博
                                    </button>
                                    <button type="button" class="btn btn-labeled social-facebook">
                                        <span class="btn-label">
                                            <i class="icon fa-facebook" aria-hidden="true"></i>
                                        </span>
                                        Facebook
                                    </button>
                                    <button type="button" class="btn btn-labeled social-twitter">
                                        <span class="btn-label">
                                            <i class="icon fa-twitter" aria-hidden="true"></i>
                                        </span>
                                        Twitter
                                    </button>
                                    <button type="button" class="btn btn-labeled social-google-plus">
                                        <span class="btn-label">
                                            <i class="icon fa-google-plus" aria-hidden="true"></i>
                                        </span>
                                        Google+
                                    </button>
                                    <button type="button" class="btn btn-labeled social-linkedin">
                                        <span class="btn-label">
                                            <i class="icon fa-linkedin" aria-hidden="true"></i>
                                        </span>
                                        Linkedin
                                    </button>
                                    <button type="button" class="btn btn-labeled social-flickr">
                                        <span class="btn-label">
                                            <i class="icon fa-flickr" aria-hidden="true"></i>
                                        </span>
                                        Flickr
                                    </button>
                                    <button type="button" class="btn btn-labeled social-tumblr">
                                        <span class="btn-label">
                                            <i class="icon fa-tumblr" aria-hidden="true"></i>
                                        </span>
                                        Tumblr
                                    </button>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap m-md-0">
                                <h4 class="example-title">不同大小的社交按钮</h4>
                                <p>不同大小的带图标的按钮或仅包含图标的按钮示例。</p>
                                <div class="example example-buttons">
                                    <ul class="list-unstyled float-left mr-15">
                                        <li>
                                            <button type="button" class="btn btn-labeled btn-lg social-wechat">
                                                <span class="btn-label">
                                                    <i class="icon fa-wechat" aria-hidden="true"></i>
                                                </span>
                                                微信
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="btn btn-labeled social-wechat">
                                                <span class="btn-label">
                                                    <i class="icon fa-wechat" aria-hidden="true"></i>
                                                </span>
                                                微信
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="btn btn-labeled btn-sm social-wechat">
                                                <span class="btn-label">
                                                    <i class="icon fa-wechat" aria-hidden="true"></i>
                                                </span>
                                                微信
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="btn btn-labeled btn-sm social-wechat">
                                                <span class="btn-label">
                                                    <i class="icon fa-wechat" aria-hidden="true"></i>
                                                </span>
                                                微信
                                            </button>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <button type="button" class="btn btn-icon btn-lg social-wechat">
                                                <i class="icon fa-wechat" aria-hidden="true"></i>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="btn btn-icon social-wechat">
                                                <i class="icon fa-wechat" aria-hidden="true"></i>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="btn btn-icon btn-sm social-wechat">
                                                <i class="icon fa-wechat" aria-hidden="true"></i>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="btn btn-icon btn-sm social-wechat">
                                                <i class="icon fa-wechat" aria-hidden="true"></i>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">图标块级按钮</h4>
                                <p>块级按钮中仅包含图标。</p>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-icon btn-block btn-primary btn-outline">
                                        <i class="icon wb-heart" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-block social-qq">
                                        <i class="icon fa-qq" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">按钮组</h3>
                </div>
                <div class="panel-body container-fluid">
                    <div class="row row-lg">
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">基本</h4>
                                <p>在一组按钮外面的元素上添加
                                    <code>.btn-group</code> 类即可。</p>
                                <div class="example example-buttons">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-icon btn-pure btn-default">
                                            <i class="icon wb-play" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="btn btn-icon btn-pure btn-primary">
                                            <i class="icon wb-pause" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="btn btn-icon btn-pure btn-danger">
                                            <i class="icon wb-stop" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-icon btn-primary">
                                            <i class="icon wb-play" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="btn btn-icon btn-primary">
                                            <i class="icon wb-pause" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="btn btn-icon btn-primary">
                                            <i class="icon wb-stop" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-outline btn-default">
                                            <i class="icon wb-pencil" aria-hidden="true"></i>编辑
                                        </button>
                                        <button type="button" class="btn btn-outline btn-default">
                                            <i class="icon wb-reply" aria-hidden="true"></i>回复
                                        </button>
                                        <button type="button" class="btn btn-outline btn-default">
                                            <i class="icon wb-share" aria-hidden="true"></i>分享
                                        </button>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-outline btn-default">左边</button>
                                        <button type="button" class="btn btn-outline btn-default">中间</button>
                                        <button type="button" class="btn btn-outline btn-default">右边</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">垂直显示</h4>
                                <p>让一组按钮垂直堆叠排列。</p>
                                <div class="example example-buttons">
                                    <div class="btn-group-vertical" role="group">
                                        <button type="button" class="btn btn-outline btn-default">
                                            <i class="icon wb-flag" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline btn-default">
                                            <i class="icon wb-wrench" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline btn-default">
                                            <i class="icon wb-print" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group-vertical" role="group">
                                        <button type="button" class="btn btn-outline btn-default">1</button>
                                        <button type="button" class="btn btn-outline btn-default">2</button>
                                        <button type="button" class="btn btn-outline btn-default">3</button>
                                    </div>
                                    <div class="btn-group-vertical" role="group">
                                        <button type="button" class="btn btn-primary">左边</button>
                                        <button type="button" class="btn btn-primary">中间</button>
                                        <button type="button" class="btn btn-primary">右边</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">不同大小的按钮组</h4>
                                <p>只要给
                                    <code>.btn-group</code> 加上
                                    <code>.btn-group-*</code> 类，就不用单独为按钮组中的每个按钮都添加控制按钮大小的类了。
                                </p>
                                <div class="example example-buttons">
                                    <div>
                                        <div class="btn-group btn-group-lg" role="group">
                                            <button type="button" class="btn btn-outline btn-default">左边</button>
                                            <button type="button" class="btn btn-outline btn-default">中间</button>
                                            <button type="button" class="btn btn-outline btn-default">右边</button>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-outline btn-default">左边</button>
                                            <button type="button" class="btn btn-outline btn-default">中间</button>
                                            <button type="button" class="btn btn-outline btn-default">右边</button>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline btn-default">左边</button>
                                            <button type="button" class="btn btn-outline btn-default">中间</button>
                                            <button type="button" class="btn btn-outline btn-default">右边</button>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="btn-group btn-xs" role="group">
                                            <button type="button" class="btn btn-outline btn-default">左边</button>
                                            <button type="button" class="btn btn-outline btn-default">中间</button>
                                            <button type="button" class="btn btn-outline btn-default">右边</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">按钮工具条</h4>
                                <p>该按钮组用于显示多个按钮之间的密切关系，通常在编辑页面上使用。</p>
                                <div class="example example-buttons">
                                    <div class="btn-toolbar">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-icon btn-primary">
                                                <i class="icon wb-bold" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon btn-primary">
                                                <i class="icon wb-italic" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon btn-primary">
                                                <i class="icon wb-underline" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-icon btn-primary">
                                                <i class="icon wb-align-left" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon btn-primary">
                                                <i class="icon wb-align-center" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon btn-primary">
                                                <i class="icon wb-align-right" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-icon btn-primary dropdown-toggle"
                                                data-toggle="dropdown" aria-expanded="false" aria-hidden="true">
                                                <i class="icon wb-wrench" aria-hidden="true"></i>
                                            </button>
                                            <div class="dropdown-menu" role="menu">
                                                <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                    <i class="icon wb-scissor" aria-hidden="true"></i> 剪切
                                                </a>
                                                <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                    <i class="icon wb-copy" aria-hidden="true"></i> 复制
                                                </a>
                                                <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                    <i class="icon wb-rubber" aria-hidden="true"></i> 清除
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="btn-toolbar">
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-icon btn-default btn-outline">
                                                <i class="icon wb-file" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon btn-default btn-outline">
                                                <i class="icon wb-pencil" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon btn-default btn-outline">
                                                <i class="icon wb-folder" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon btn-default btn-outline">
                                                <i class="icon wb-trash" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">嵌套按钮组</h4>
                                <p>如果需要把下拉菜单混合到一系列按钮中，您只须把
                                    <code>.btn-group</code> 放入另一个
                                    <code>.btn-group</code> 中。</p>
                                <div class="example example-buttons">
                                    <div class="btn-group" aria-label="Button group with nested dropdown" role="group">
                                        <button type="button" class="btn btn-primary">1</button>
                                        <button type="button" class="btn btn-primary">2</button>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-primary dropdown-toggle"
                                                id="exampleGroupDrop1" data-toggle="dropdown" aria-expanded="false">
                                                下拉菜单
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="exampleGroupDrop1" role="menu">
                                                <a class="dropdown-item" href="javascript:;" role="menuitem">下拉菜单项</a>
                                                <a class="dropdown-item" href="javascript:;" role="menuitem">下拉菜单项</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="btn-group" aria-label="Button group with nested dropdown" role="group">
                                        <button type="button" class="btn btn-outline btn-default">1</button>
                                        <button type="button" class="btn btn-outline btn-default">2</button>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-outline btn-default dropdown-toggle"
                                                id="exampleGroupDrop2" data-toggle="dropdown" aria-expanded="false">
                                                下拉菜单
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu">
                                                <a class="dropdown-item" href="javascript:;" role="menuitem">下拉菜单项</a>
                                                <a class="dropdown-item" href="javascript:;" role="menuitem">下拉菜单项</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">两端对齐的按钮组</h4>
                                <p>让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。</p>
                                <div class="example example-buttons">
                                    <div class="btn-group d-flex">
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-primary">
                                                <i class="icon wb-star" aria-hidden="true"></i>
                                                <br>
                                                <span class="text-uppercase d-none d-sm-block">收藏</span>
                                            </button>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-info">
                                                <i class="icon wb-time" aria-hidden="true"></i>
                                                <br>
                                                <span class="text-uppercase d-none d-sm-block">最近</span>
                                            </button>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-success">
                                                <i class="icon wb-user" aria-hidden="true"></i>
                                                <br>
                                                <span class="text-uppercase d-none d-sm-block">联系人</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap m-md-0">
                                <h4 class="example-title">Button.Js 组件</h4>
                                <div class="example example-buttons">
                                    <div>
                                        <button type="button" class="btn btn-sm btn-primary" data-toggle="button"
                                            data-more="#exampleMoreless">
                                            <i class="icon wb-plus text" aria-hidden="true"></i>
                                            <span class="text">展开</span>
                                            <i class="icon wb-minus text-active" aria-hidden="true"></i>
                                            <span class="text-active">收起</span>
                                        </button>
                                    </div>
                                    <div>
                                        <button type="button" class="btn btn-success" data-toggle="button">
                                            <i class="icon wb-upload text" aria-hidden="true"></i>
                                            <span class="text">上传</span>
                                            <i class="icon wb-check text-active" aria-hidden="true"></i>
                                            <span class="text-active">成功</span>
                                        </button>
                                        <button type="button" class="btn btn-default btn-outline" data-toggle="button">
                                            <i class="icon wb-heart-outline text" aria-hidden="true"></i>
                                            <i class="icon wb-heart text-active text-danger" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="btn btn-default btn-outline active"
                                            data-toggle="button">
                                            <span class="text">
                                                <i class="icon wb-thumb-up" aria-hidden="true"></i> 25
                                            </span>
                                            <span class="text-active">
                                                <i class="icon wb-thumb-up text-danger" aria-hidden="true"></i> 26
                                            </span>
                                        </button>
                                    </div>
                                    <div>
                                        <div class="btn-group" data-toggle="buttons" role="group">
                                            <label class="btn btn-outline btn-primary active">
                                                <input type="radio" name="options" autocomplete="off" value="male"
                                                    checked="">
                                                <i class="icon wb-check text-active" aria-hidden="true"></i> 男
                                            </label>
                                            <label class="btn btn-outline btn-primary">
                                                <input type="radio" name="options" autocomplete="off" value="female">
                                                <i class="icon wb-check text-active" aria-hidden="true"></i> 女
                                            </label>
                                            <label class="btn btn-outline btn-primary">
                                                <input type="radio" name="options" autocomplete="off" value="n/a">
                                                <i class="icon wb-check text-active" aria-hidden="true"></i> 保密
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="btn-group" data-toggle="buttons" role="group">
                                            <label class="btn btn-primary active">
                                                <input type="checkbox" name="multiples" value="apple" checked=""> 苹果
                                            </label>
                                            <label class="btn btn-primary active">
                                                <input type="checkbox" name="multiples" value="banana" checked=""> 香蕉
                                            </label>
                                            <label class="btn btn-primary">
                                                <input type="checkbox" name="multiples" value="orange"> 橘子
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">加载状态</h4>
                                <p>通过添加
                                    <code>data-loading-text="加载中..."</code> 类来使用加载状态按钮。</p>
                                <div class="example">
                                    <button type="button" class="btn btn-primary" id="exampleStatefulButton"
                                        data-loading-text="加载中...">
                                        加载数据
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">Ladda Buttons
                        <small>
                            <a class="example-plugin-link" href="https://lab.hakim.se/ladda/" target="_blank">
                                官网
                            </a>
                        </small>
                    </h3>
                </div>
                <div class="panel-body container-fluid">
                    <div class="row row-lg">
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">扩大</h4>
                                <div class="example example-buttons">
                                    <div class="float-left">
                                        <button type="button" class="btn btn-info ladda-button" data-style="expand-left"
                                            data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-expand mr-10" aria-hidden="true"></i>左边</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-success ladda-button"
                                            data-style="expand-right" data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-expand mr-10" aria-hidden="true"></i>右边</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-primary ladda-button"
                                            data-style="expand-up" data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-expand mr-10" aria-hidden="true"></i>上边</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-warning ladda-button"
                                            data-style="expand-down" data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-expand mr-10" aria-hidden="true"></i>下边</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">缩放</h4>
                                <div class="example example-buttons">
                                    <div class="float-left">
                                        <button type="button" class="btn btn-warning ladda-button" data-style="zoom-in"
                                            data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-zoom-in mr-10" aria-hidden="true"></i>放大</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-danger ladda-button" data-style="zoom-out"
                                            data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-zoom-out mr-10" aria-hidden="true"></i>缩小</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-xl-4">

                            <div class="example-wrap">
                                <h4 class="example-title">进度</h4>
                                <div class="example example-buttons">
                                    <div class="float-left">
                                        <button type="button" class="btn btn-success ladda-button"
                                            data-style="expand-left" data-plugin="laddaProgress">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-expand mr-10" aria-hidden="true"></i>扩大</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-warning ladda-button" data-style="zoom-in"
                                            data-plugin="laddaProgress">
                                            <span class="ladda-label">
                                                <i class="icon wb-zoom-in mr-10" aria-hidden="true"></i>缩放</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-primary ladda-button"
                                            data-style="slide-left" data-plugin="laddaProgress">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-left mr-10" aria-hidden="true"></i>滑动</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">

                            <div class="example-wrap m-md-0">
                                <h4 class="example-title">滑动</h4>
                                <div class="example example-buttons">
                                    <div class="float-left">
                                        <button type="button" class="btn btn-primary ladda-button"
                                            data-style="slide-left" data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-left mr-10" aria-hidden="true"></i>向左滑动</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-primary ladda-button"
                                            data-style="slide-right" data-plugin="ladda">
                                            <span class="ladda-label">向右滑动
                                                <i class="icon wb-arrow-right ml-10" aria-hidden="true"></i>
                                            </span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-primary ladda-button" data-style="slide-up"
                                            data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-up mr-10" aria-hidden="true"></i>向上滑动</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                    <div class="float-left">
                                        <button type="button" class="btn btn-primary ladda-button"
                                            data-style="slide-down" data-plugin="ladda">
                                            <span class="ladda-label">
                                                <i class="icon wb-arrow-down mr-10" aria-hidden="true"></i>向下滑动</span>
                                            <span class="ladda-spinner"></span></button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">

                            <div class="example-wrap">
                                <h4 class="example-title">大小</h4>
                                <div class="example example-buttons">
                                    <button type="button" class="btn btn-primary btn-lg ladda-button"
                                        data-style="expand-left" data-plugin="ladda">
                                        <span class="ladda-label">大按钮</span>
                                        <span class="ladda-spinner"></span></button>
                                    <button type="button" class="btn btn-primary ladda-button" data-style="expand-left"
                                        data-plugin="ladda">
                                        <span class="ladda-label">默认</span>
                                        <span class="ladda-spinner"></span></button>
                                    <button type="button" class="btn btn-primary btn-sm ladda-button"
                                        data-style="expand-left" data-plugin="ladda">
                                        <span class="ladda-label">小按钮</span>
                                        <span class="ladda-spinner"></span></button>
                                    <button type="button" class="btn btn-primary btn-sm ladda-button"
                                        data-style="expand-left" data-plugin="ladda">
                                        <span class="ladda-label">微型按钮</span>
                                        <span class="ladda-spinner"></span></button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--脚本-->
    <script src="../../libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>

</html>